// All
.apron-input {
  width: 100%!important;
  .append-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

// Desktop
@media screen and (min-width: 1024px) {
  // 面包屑
  .apron-breadcrumb {
    margin: 5Px 0;
  }
  .apron-breadcrumb-item {
    margin: 0 0 0 5Px;
    .apron-breadcrumb-item-separator {
      margin-right: 5Px;
    }
  }
  // 按钮
  .apron-button {
    border-width: 1Px;
    font-size: 14Px;
  }
  .apron-standard-size-button {
    height: 40Px;
    border-radius: 20Px;
    min-width: 140Px;
    padding: 0 20Px;
  }
  .apron-small-size-button {
    height: 30Px;
    border-radius: 15Px;
    min-width: 80Px;
    padding: 0 10Px;
  }
  // 复选框
  .apron-checkbox {
    .slot {
      margin-left: 10Px;
      line-height: 25Px;
    }
    .apron-check {
      width: 25Px;
      height: 2Ppx;
      border-radius: 8Px;
    }
  }
  // 分隔
  .apron-divider {
    margin: 20Px 0;
    border-bottom-width: 1Px;
    .apron-divider-orientation {
      font-size: 14Px;
      padding: 0 10Px;
    }
    .apron-divider-left {
      left: 20Px;
    }
    .apron-divider-right {
      right: 20Px;
    }
  }
  // 空状态
  .apron-empty {
    .icon {
      width: 40Px;
      height: 40Px;
    }
    .description {
      margin-top: 15Px;
      font-size: 1Ppx;
    }
  }
  .apron-empty-container-bordered {
    border-width: 1Px;
  }
  // 输入框
  .apron-input {
    border-width: 1Px;
    height: 40Px;
    width: 300Px;
    border-radius: 20Px;
    padding: 0 15Px;
    .input-container {
      input {
        font-size: 14Px;
      }
      .append-button-container {
        .append-button {
          height: 20Px;
          margin-left: 5Px;
        }
      }
    }
    .apron-input-prepend, .apron-input-append {
      font-size: 14Px;
    }
    .apron-input-prepend {
      margin-right: 15Px;
    }
    .apron-input-append {
      margin-left: 15Px;
    }
  }
  .apron-input-filled {
    border-width: 1Px;
  }
  
  .apron-input-disabled {
    border-width: 1Px;
    color: var(--color-disabled-text);
  }
  .search-button {
    margin-right: -15Px;
    min-width: 60Px;
    padding: 0 10Px;
    *:first-child {
      margin-right: 5Px;
    }
  }
  // 连接
  .apron-link {
    font-size: 14Px;
  }
  // 空隙
  .apron-row-space {
    & > * {
      margin-left: 10Px;
    }
  }
  .apron-col-space {
    & > * {
      margin-top: 10Px;
    }
  }
  // 加载中
  .apron-spin-loading {
    .cover {
      .loading-container {
        .loading-icon {
          width: 20Px;
          height: 20Px;
        }
        .loading-content {
          margin-left: 10Px;
        }
      }
    }
  }
  .apron-spin-left-top {
    .cover {
      .loading-container {
        top: 20Px;
        left: 20Px;
      }
    }
  }
  .apron-spin-left-center {
    .cover {
      .loading-container {
        left: 20Px;
      }
    }
  }
  .apron-spin-left-bottom {
    .cover {
      .loading-container {
        bottom: 20Px;
        left: 20Px;
      }
    }
  }
  .apron-spin-right-top {
    .cover {
      .loading-container {
        top: 20Px;
        right: 20Px;
      }
    }
  }
  .apron-spin-right-center {
    .cover {
      .loading-container {
        right: 20Px;
      }
    }
  }
  .apron-spin-right-bottom {
    .cover {
      .loading-container {
        bottom: 20Px;
        right: 20Px;
      }
    }
  }
  .apron-spin-center-top {
    .cover {
      .loading-container {
        top: 20Px;
      }
    }
  }
  .apron-spin-center-center {
    .cover {
      .loading-container {
        .loading-icon {
          width: 50Px;
          height: 50Px;
        }
        .loading-content {
          margin-top: 15Px;
        }
      }
    }
  }
  .apron-spin-center-bottom {
    .cover {
      .loading-container {
        bottom: 20Px;
      }
    }
  }
  // 开关
  .apron-standard-switch {
    width: 84Px;
    height: 40Px;
    border-radius: 20Px;
    .apron-switch-handler {
      height: 32Px;
      width: 32Px;
    }
  }
  .apron-small-switch {
    width: 64Px;
    height: 30Px;
    border-radius: 15Px;
    .apron-switch-handler {
      height: 22Px;
      width: 22Px;
    }
  }
  .apron-switch-checked {
    .apron-switch-handler {
      transform: translate(calc(0% + 4Px), -50%);
    }
  }
  .apron-switch-unchecked {
    .apron-switch-handler {
      transform: translate(calc(-100% - 4Px), -50%)!important;
    }
  }
  // 时间线
  .apron-timeline-item {
    .apron-timeline-item-container {
      padding-bottom: 25Px;
      .apron-timeline-item__text {
        font-size: 14Px;
        line-height: 25Px;
      }
      .apron-timeline-item__label {
        font-size: 12Px;
      }
    }
    .apron-timeline-item__dot {
      width: 11Px;
      height: 11Px;
      border-width: 3Px;
      top: calc(25Px / 2);
    }
  }
  .apron-timeline-item-align-left {
    &::before {
      width: 1Px;
      left: 4Px;
      top: 13Px;
    }
    .apron-timeline-item-container {
      padding-left: 25px;
    }
  }
  .apron-timeline-item-align-right {
    &::after {
      width: 1Px;
      right: 5Px;
      top: 13Px;
    }
    .apron-timeline-item-container {
      padding-right: 25Px;
    }
  }
  // 视频播放器
  .apron-video {
    .controls-container {
      .video-control {
        .element {
          font-size: 16Px;
        }
      }
    }
  }
}
